<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import Request from '@/api/axios'
import { message } from 'ant-design-vue'
import router from '@/router'
import { HttpStatusCode } from 'axios'
import { SearchOutlined } from '@ant-design/icons-vue'

const SearchStr = ref('')
const ProblemList = ref([])
const loading = ref(false)

const pageProblems = computed(() => {
    return ProblemList.value.filter((problem: any) => {
        return problem.title.toLowerCase().includes(SearchStr.value.toLowerCase()) ||
            problem.id.toString() === SearchStr.value
    })
})

const SearchProblems = async () => {
    await Request.get({ url: '/problem/list' })
        .then(function (response) {
            if (response.code === HttpStatusCode.Ok) {
                ProblemList.value = response.info
            } else {
                message.warning('服务器错误', 1)
            }
        })
        .catch((err) => {
            message.warning('题目拉取失败', 1)
            console.log(err)
        })
}
onMounted(async () => {
    await SearchProblems()
})
const DifficultyMap = [
    {
        color: "#ffffff",
        text: '未知'
    },
    {
        color: '#52c41a',
        text: '简单'
    },
    {
        color: '#faad14',
        text: '普通'
    },
    {
        color: '#fa8c16',
        text: '中等'
    },
    {
        color: '#f5222d',
        text: '困难'
    },
    {
        color: '#594ef7',
        text: '很难'
    },
    {
        color: '#454545',
        text: '噩梦'
    }
]

const columns = [
    {
        title: '题号',
        dataIndex: 'id',
        width: '12%',
        align: 'center'
    },
    {
        title: '题目',
        dataIndex: 'title',
        width: '20%',
        ellipsis: true
    },
    {
        title: '难度',
        dataIndex: 'difficulty',
        width: '12%',
        align: 'center',
        sorter: (a, b) => a.difficulty - b.difficulty
    },
    {
        title: '通过率',
        dataIndex: 'acc',
        width: '15%',
        align: 'center',
        sorter: (a, b) => getAcc(a) - getAcc(b)
    },
    {
        title: '标签',
        dataIndex: 'tags',
        width: '25%'
    }
]

const getAcc = (record) => {
    if (record.submission == 0) return 0
    return (100 * record.accept) / record.submission
}

const getProgressColor = (percent: number) => {
    if (percent < 30) return '#f5222d'
    if (percent < 60) return '#faad14'
    return '#52c41a'
}
</script>

<template>
    <div class="problem-list-container">
        <div class="search-container">
            <div class="search-box">
                <SearchOutlined class="search-icon" />
                <a-input-search v-model:value="SearchStr" placeholder="搜索题目编号或关键字..." @search="SearchProblems" />
            </div>
            <div class="problem-count">
                共 {{ ProblemList.length }} 道题目
            </div>
        </div>

        <a-table :data-source="pageProblems" :columns="columns" :loading="loading" size="middle" :pagination="{
            pageSize: 15,
            showSizeChanger: true,
            showQuickJumper: true,
        }" class="custom-table">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'id'">
                    <span class="problem-id">{{ record.id }}</span>
                </template>

                <template v-if="column.dataIndex === 'title'">
                    <div class="problem-title" @click="router.push({ name: 'problem', params: { id: record.id } })">
                        {{ record.title }}
                    </div>
                </template>

                <template v-else-if="column.dataIndex === 'difficulty'">
                    <span class="difficulty-tag" :style="{ backgroundColor: DifficultyMap[record.difficulty].color }">
                        {{ DifficultyMap[record.difficulty].text }}
                    </span>
                </template>

                <template v-else-if="column.dataIndex === 'acc'">
                    <div class="acc-container">
                        <a-progress :percent="Number(getAcc(record).toFixed(1))"
                            :stroke-color="getProgressColor(getAcc(record))" size="small" />
                    </div>
                </template>

                <template v-else-if="column.dataIndex === 'tags'">
                    <div class="tags-container">
                        <a-tag v-for="(tag, index) in record.tags" :key="index" :bordered="false" color="blue">
                            {{ tag.toUpperCase() }}
                        </a-tag>
                    </div>
                </template>
            </template>
        </a-table>
    </div>
</template>

<style scoped>
.problem-list-container {
    padding: 24px;
    min-height: 100vh;
}

.search-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-box {
    position: relative;
    width: 300px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c8c8c;
}


.problem-count {
    font-size: 14px;
}

.custom-table {
    border-radius: 8px;
    overflow: hidden;
}

.problem-id {
    font-family: 'Fira Code', monospace;
}

.problem-title {
    cursor: pointer;
    transition: color 0.3s;
}

.problem-title:hover {
    text-decoration: underline;
}

.difficulty-tag {
    padding: 4px 12px;
    border-radius: 12px;
    color: white;
    font-size: 12px;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.acc-container {
    padding: 0 12px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.custom-tag {
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
}
</style>
